<template>
  <view class="MaterialPay">
<!--    <view class="demo-nav">
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </view> -->
    <van-cell title="现在支付" label="价格详情" align="left">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <span class="custom-title" style="color: red;font-size: 1rem">￥{{totalPrice}}</span>
      </template>
    </van-cell>
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell clickable @click="radio = '1',showOffline = false" align="left">
          <template #title>
            <span type="danger">支付宝支付</span>
          </template>
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell clickable @click="radio = '2',showOffline = false" align="left">
          <template #title>
            <span type="danger">微信支付</span>
          </template>
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell clickable @click="radio = '3',showOffline = true" align="left">
          <template #title>
            <span type="danger">线下支付</span>
          </template>
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
        <view align="left" style="padding: 1rem;font-size: 0.7rem" v-show="showOffline">
          <p>上传凭证：</p>
          <span style="color: red;">(注:用户支付款项到平台，确认收货后由平台向商户拨付。)</span>
          <p style="color: red;margin-bottom: 0.5rem;">
            账户：河北当途网络科技有限公司<br/>
            账号：0402021609300377978<br/>
            开户行：中国工商银行股份有限公司石家庄高新支行<br/>
          </p>
		  <image v-show="showscpg" @click="afterRead()" src="../../assets/scpg.png" style="width: 4.5rem;height: 4.5rem;"></image>
		</view>
      </van-cell-group>
    </van-radio-group>
    <p style="text-align: left;">
      <van-field name="checkbox" label="">
        <template #input>
          <van-checkbox v-model="checkbox" shape="square" />
          我同意<span style="color: #8cc5ff">购买守则</span>，
          <span style="color: #8cc5ff">取消政策</span>和
          <span style="color: #8cc5ff">退款政策</span>
          (含服务费)。
        </template>
      </van-field>
      </p>
    <van-submit-bar button-text="立即支付" @submit="onSubmit" />
  </view>
</template>

<script>
	import { updateOrderMethod,uploadVoucher,insertOrderVoucher } from "@/api/commodity/alipay";
	import { updateCustomerCouponState } from "@/api/customer/customer";
	import { jointadd } from "@/api/commodity/joint";
	import local from '@/utils/localStorage.js';
	import { Toast } from "vant";
	
  export default {
    data(){
      return{
        checkbox: true,
        checkboxGroup: [],
        radio: '1',
        showOffline: false,
		fileList:[],
        // 总价
        totalPrice:null,
        // 订单ID
        orderId :null,
        // 订单凭证路径
        filePath:null,
        // 优惠券ID
        couponId:null,
        formjoin:{
          orderIdnumone:0,
          productIdnum:0,
        },
		showscpg:true
      }
    },
	onLoad: function (option) {
		// 订单ID
		let orderId = parseInt(option.orderId);
		let orderIdnumone = parseInt(option.orderId);
		let productIdnum = parseInt(option.productId);
		// 支付价格
		let totalPrice = parseFloat(option.totalPrice);
		// 优惠券ID
		let availableId = option.availableId;
		this.couponId = availableId;
		this.totalPrice = totalPrice;
		this.orderId = orderId;
		this.formjoin.orderIdnumone = orderIdnumone;
		this.formjoin.productIdnum = productIdnum;
		
	},
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
	  // 付款
      async onSubmit(){
		if(this.radio == "2"){
			const res = await this.$myRequest({
				url:'/api/wxPay/wxpay/'+this.totalPrice,
				method:'get',
			});
			console.log(JSON.stringify(res.data.data))
			uni.requestPayment({
				provider: 'wxpay',
				orderInfo:  JSON.stringify(res.data.data), //微信、支付宝订单数据
				success: function (res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function (err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}else if(this.radio == "3"){
			insertOrderVoucher(this.orderId,this.filePath).then((res) =>{
				if(res.data.code == 200){
					console.log("this.couponId:"+this.couponId);
					if(this.couponId != null){
					  updateCustomerCouponState(this.couponId).then((res) =>{
						if(res.data.code == 200){
						Toast({
						  message: "支付成功",
						  position: "top"
						});
						this.$router.go(-1);//返回上一层
					  }else {
						Toast({
						  message: "请联系技术人员",
						  position: "top"
						});
					  }
					})
					}else{
					  Toast({
						message: "支付成功",
						position: "top"
					  });
					  this.$router.go(-1);//返回上一层
					}
				}else{
					Toast({
					message: "添加凭证出错,请联系技术人员",
					position: "top"
					});
				}
			})
		}
      //   updateOrderMethod(this.orderId,this.radio).then(res=>{
      //     if(res.data.code == 200){
      //     if(this.radio == '3'){
      //       insertOrderVoucher(this.orderId,this.filePath).then((res) =>{
      //         if(res.data.code == 200){
      //         console.log("this.couponId:"+this.couponId);
      //         if(this.couponId != null){
      //           updateCustomerCouponState(this.couponId).then((res) =>{
      //             if(res.data.code == 200){
      //             Toast({
      //               message: "支付成功",
      //               position: "top"
      //             });
      //             this.$router.go(-1);//返回上一层
      //           }else {
      //             Toast({
      //               message: "请联系技术人员",
      //               position: "top"
      //             });
      //           }
      //         })
      //         }else{
      //           Toast({
      //             message: "支付成功",
      //             position: "top"
      //           });
      //           this.$router.go(-1);//返回上一层
      //         }
      //       }else{
      //         Toast({
      //           message: "添加凭证出错,请联系技术人员",
      //           position: "top"
      //         });
      //       }
      //     })
      //     }else{
      //       if(res.data.code == 200){
      //         console.log("this.couponId:"+this.couponId);
      //         if(this.couponId != null){
      //           updateCustomerCouponState(this.couponId).then((res) =>{
      //             if(res.data.code == 200){
      //             console.log("2222222222222222222222")
      //             Toast({
      //               message: "支付成功",
      //               position: "top"
      //             });
      //             this.$router.go(-1);//返回上一层
      //           }else {
      //             Toast({
      //               message: "请联系技术人员",
      //               position: "top"
      //             });
      //           }
      //         })
      //         }else{
      //           jointadd(this.formjoin).then(res=>{
      //             console.log("111111111111111111")
      //         })
      //           Toast({
      //             message: "支付成功",
      //             position: "top"
      //           });
      //           this.$router.go(-1);//返回上一层
      //         }
      //       }else {
      //         Toast({
      //           message: "支付失败,请联系技术人员",
      //           position: "top"
      //         });
      //       }
      //     }
      //   }
      // })
      },

     //  // 支付订单
     // onSubmit(){
     //    updateOrderMethod(this.orderId,this.radio).then(res=>{
     //      if(res.data.code == 200){
     //        if(this.radio == '3'){
     //          insertOrderVoucher(this.orderId,this.filePath).then((res) =>{
     //            if(res.data.code == 200){
     //              console.log("this.couponId:"+this.couponId);
     //              if(this.couponId != null){
     //                updateCustomerCouponState(this.couponId).then((res) =>{
     //                  if(res.data.code == 200){
     //                    Toast({
     //                      message: "支付成功",
     //                      position: "top"
     //                    });
     //                    this.$router.go(-1);//返回上一层
     //                  }else {
     //                    Toast({
     //                      message: "请联系技术人员",
     //                      position: "top"
     //                    });
     //                  }
     //                })
     //              }else{
     //                Toast({
     //                  message: "支付成功",
     //                  position: "top"
     //                });
     //                this.$router.go(-1);//返回上一层
     //              }
     //            }else{
     //              Toast({
     //                message: "添加凭证出错,请联系技术人员",
     //                position: "top"
     //              });
     //            }
     //          })
     //        }else{
     //          if(res.data.code == 200){
     //            console.log("this.couponId:"+this.couponId);
     //            if(this.couponId != null){
     //              updateCustomerCouponState(this.couponId).then((res) =>{
     //                if(res.data.code == 200){
     //                  Toast({
     //                    message: "支付成功",
     //                    position: "top"
     //                  });
     //                  this.$router.go(-1);//返回上一层
     //                }else {
     //                  Toast({
     //                    message: "请联系技术人员",
     //                    position: "top"
     //                  });
     //                }
     //              })
     //            }else{
     //              Toast({
     //                message: "支付成功",
     //                position: "top"
     //              });
     //              this.$router.go(-1);//返回上一层
     //            }
     //          }else {
     //            Toast({
     //              message: "支付失败,请联系技术人员",
     //              position: "top"
     //            });
     //          }
     //        }
     //      }
     //    })
     //  },
      // 上传线下支付订单凭证
      afterRead(res) {
		  console.log(JSON.stringify(res))
		  // console.log(res)
    //     let formData = new FormData();
    //     formData.append("voucherFile", res.file);
    //     // 此时可以自行将文件上传至服务器
    //     uploadVoucher(formData).then((res) =>{
    //       this.filePath = "http://39.98.237.139"+res.data.data;
    //     })
      },

		afterRead() {
			uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
				count: 1, //默认选择1张图片
				sourceType: ['album'],
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				success: (res) => {
					// console.log(pathToBase64(res.tempFilePaths[0]))
					// console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
					uni.uploadFile({ //将本地资源上传到开发者服务器
						url: "http://localhost:8080/api/order/master/uploadVoucher", //接口地址
						filePath: res.tempFilePaths[0], //图片地址
						name: 'voucherFile',
						header:{
							"token":local.get("token")
						},
						success: (res) => {
							uni.showToast({
								title:"上传成功"
							})
							this.showscpg = false;
						}
					});
				}
			});
		}
    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
